<html>
<head>
<meta charset="utf-8"/>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport"/>
<meta content="telephone=no" name="format-detection"/>
<style type="text/css">

#watermark {

  position: relative;
  overflow: hidden;
}

#watermark .x {
  position: absolute;
  top: 800;
  left: 400;
  color: #3300ff;
  font-size: 50px;
  pointer-events: none;
  opacity:0.5;
  filter:Alpha(opacity=50);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
    </style>
<style type="text/css">
 html{color:#333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;font-family:Helvetica Neue,PingFang SC,Verdana,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif}html.borderbox *,html.borderbox :after,html.borderbox :before{box-sizing:border-box}article,aside,blockquote,body,button,code,dd,details,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}audio,canvas,video{display:inline-block}body,button,input,select,textarea{font:300 1em/1.8 PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,Helvetica,sans-serif}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}blockquote{position:relative;color:#999;font-weight:400;border-left:1px solid #1abc9c;padding-left:1em;margin:1em 3em 1em 2em}@media only screen and (max-width:640px){blockquote{margin:1em 0}}abbr,acronym{border-bottom:1px dotted;font-variant:normal}abbr{cursor:help}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}q:after,q:before{content:""}sub,sup{font-size:75%;line-height:0;position:relative}:root sub,:root sup{vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a{color:#1abc9c}a:hover{text-decoration:underline}.typo a{border-bottom:1px solid #1abc9c}.typo a:hover{border-bottom-color:#555;color:#555}.typo a:hover,a,ins{text-decoration:none}.typo-u,u{text-decoration:underline}mark{background:#fffdd1;border-bottom:1px solid #ffedce;padding:2px;margin:0 5px}code,pre,pre tt{font-family:Courier,Courier New,monospace}pre{background:hsla(0,0%,97%,.7);border:1px solid #ddd;padding:1em 1.5em;display:block;-webkit-overflow-scrolling:touch}hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:.8em;height:10px}.typo-small,figcaption,small{font-size:.9em;color:#888}b,strong{font-weight:700;color:#000}[draggable]{cursor:move}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}.textwrap,.textwrap td,.textwrap th{word-wrap:break-word;word-break:break-all}.textwrap-table{table-layout:fixed}.serif{font-family:Palatino,Optima,Georgia,serif}.typo-dl,.typo-form,.typo-hr,.typo-ol,.typo-p,.typo-pre,.typo-table,.typo-ul,.typo dl,.typo form,.typo hr,.typo ol,.typo p,.typo pre,.typo table,.typo ul,blockquote{margin-bottom:1rem}h1,h2,h3,h4,h5,h6{font-family:PingFang SC,Helvetica Neue,Verdana,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;color:#000;line-height:1.35}.typo-h1,.typo-h2,.typo-h3,.typo-h4,.typo-h5,.typo-h6,.typo h1,.typo h2,.typo h3,.typo h4,.typo h5,.typo h6{margin-top:1.2em;margin-bottom:.6em;line-height:1.35}.typo-h1,.typo h1{font-size:2em}.typo-h2,.typo h2{font-size:1.8em}.typo-h3,.typo h3{font-size:1.6em}.typo-h4,.typo h4{font-size:1.4em}.typo-h5,.typo-h6,.typo h5,.typo h6{font-size:1.2em}.typo-ul,.typo ul{margin-left:1.3em;list-style:disc}.typo-ol,.typo ol{list-style:decimal;margin-left:1.9em}.typo-ol ol,.typo-ol ul,.typo-ul ol,.typo-ul ul,.typo li ol,.typo li ul{margin-bottom:.8em;margin-left:2em}.typo-ol ul,.typo-ul ul,.typo li ul{list-style:circle}.typo-table td,.typo-table th,.typo table caption,.typo table td,.typo table th{border:1px solid #ddd;padding:.5em 1em;color:#666}.typo-table th,.typo table th{background:#fbfbfb}.typo-table thead th,.typo table thead th{background:hsla(0,0%,95%,.7)}.typo table caption{border-bottom:none}.typo-input,.typo-textarea{-webkit-appearance:none;border-radius:0}.typo-em,.typo em,caption,legend{color:#000;font-weight:inherit}.typo-em{position:relative}.typo-em:after{position:absolute;top:.65em;left:0;width:100%;overflow:hidden;white-space:nowrap;content:"\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB"}.typo img{max-width:100%}.common-content{font-weight:400;color:#353535;line-height:1.75rem;white-space:normal;word-break:normal;font-size:1rem}.common-content img{display:block;max-width:100%;background-color:#eee}.common-content audio,.common-content video{width:100%;background-color:#eee}.common-content center,.common-content font{margin-top:1rem;display:inline-block}.common-content center{width:100%}.common-content pre{margin-top:1rem;padding-left:0;padding-right:0;position:relative;overflow:hidden}.common-content pre code{font-size:.8rem;font-family:Consolas,Liberation Mono,Menlo,monospace,Courier;display:block;width:100%;box-sizing:border-box;padding-left:1rem;padding-right:1rem;overflow-x:auto}.common-content hr{border:none;margin-top:1.5rem;margin-bottom:1.5rem;border-top:1px solid #f5f5f5;height:1px;background:none}.common-content b,.common-content h1,.common-content h2,.common-content h3,.common-content h4,.common-content h5,.common-content strong{font-weight:700}.common-content h1,.common-content h2{font-size:1.125rem;margin-bottom:.45rem}.common-content h3,.common-content h4,.common-content h5{font-size:1rem;margin-bottom:.45rem}.common-content p{font-weight:400;color:#353535;margin-top:.15rem}.common-content .orange{color:#ff5a05}.common-content .reference{font-size:1rem;color:#888}.custom-rich-content h1{margin-top:0;font-weight:400;font-size:15.25px;border-bottom:1px solid #eee;line-height:2.8}.custom-rich-content li,.custom-rich-content p{font-size:14px;color:#888;line-height:1.6}table.hljs-ln{margin-bottom:0;border-spacing:0;border-collapse:collapse}table.hljs-ln,table.hljs-ln tbody,table.hljs-ln td,table.hljs-ln tr{box-sizing:border-box}table.hljs-ln td{padding:0;border:0}table.hljs-ln td.hljs-ln-numbers{min-width:15px;color:rgba(27,31,35,.3);text-align:right;white-space:nowrap;cursor:pointer;user-select:none}table.hljs-ln td.hljs-ln-code,table.hljs-ln td.hljs-ln-numbers{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;vertical-align:top}table.hljs-ln td.hljs-ln-code{position:relative;padding-right:10px;padding-left:10px;overflow:visible;color:#24292e;word-wrap:normal;white-space:pre}video::-webkit-media-controls{overflow:hidden!important}video::-webkit-media-controls-enclosure{width:calc(100% + 32px);margin-left:auto}.button-cancel{color:#888;border:1px solid #888;border-radius:3px;margin-right:12px}.button-cancel,.button-primary{-ms-flex-positive:1;flex-grow:1;height:35px;display:inline-block;font-size:15px;text-align:center;line-height:36px}.button-primary{color:#fff;background-color:#ff5a05;border-radius:3px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.eot);src:url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.eot#iefix) format("embedded-opentype"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.woff) format("woff"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.ttf) format("truetype"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.svg#iconfont) format("svg")}@font-face{font-family:player-font;src:url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.eot);src:url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.eot#iefix) format("embedded-opentype"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.woff) format("woff"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.ttf) format("truetype"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.svg#player-font) format("svg")}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}html{background:#fff;min-height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{width:100%}body.fixed{overflow:hidden;position:fixed;width:100vw;height:100vh}i{font-style:normal}a{word-wrap:break-word;-webkit-tap-highlight-color:rgba(0,0,0,0)}a:hover{text-decoration:none}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.MathJax,.MathJax_CHTML,.MathJax_MathContainer,.MathJax_MathML,.MathJax_PHTML,.MathJax_PlainSource,.MathJax_SVG{outline:0}.ios-app-switch .js-audit{display:none}._loading_wrap_{position:fixed;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}._loading_div_class_,._loading_wrap_{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}._loading_div_class_{word-wrap:break-word;padding:.5rem .75rem;text-align:center;z-index:9999;font-size:.6rem;max-width:60%;color:#fff;border-radius:.25rem;-ms-flex-direction:column;flex-direction:column}._loading_div_class_ .message{color:#353535;font-size:16px;line-height:3}.spinner{animation:circle-rotator 1.4s linear infinite}.spinner *{line-height:0;box-sizing:border-box}@keyframes circle-rotator{0%{transform:rotate(0deg)}to{transform:rotate(270deg)}}.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:circle-dash 1.4s ease-in-out infinite,circle-colors 5.6s ease-in-out infinite}@keyframes circle-colors{0%{stroke:#ff5a05}to{stroke:#ff5a05}}@keyframes circle-dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}.confirm-box-wrapper,.confirm-box-wrapper .mask{position:absolute;top:0;left:0;right:0;bottom:0}.confirm-box-wrapper .mask{background:rgba(0,0,0,.6)}.confirm-box-wrapper .confirm-box{position:fixed;top:50%;left:50%;width:267px;background:#fff;transform:translate(-50%,-50%);border-radius:7px}.confirm-box-wrapper .confirm-box .head{margin:0 18px;font-size:18px;text-align:center;line-height:65px;border-bottom:1px solid #d9d9d9}.confirm-box-wrapper .confirm-box .body{padding:18px;padding-bottom:0;color:#353535;font-size:12.5px;max-height:150px;overflow:auto}.confirm-box-wrapper .confirm-box .foot{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:18px}.confirm-box-wrapper .confirm-box .foot .button-cancel{border:1px solid #d9d9d9}.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}




    </style>
<style type="text/css">
        .button-cancel[data-v-87ffcada]{color:#888;border:1px solid #888;border-radius:3px;margin-right:12px}.button-cancel[data-v-87ffcada],.button-primary[data-v-87ffcada]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:35px;display:inline-block;font-size:15px;text-align:center;line-height:36px}.button-primary[data-v-87ffcada]{color:#fff;background-color:#ff5a05;border-radius:3px}.pd[data-v-87ffcada]{padding-left:1.375rem;padding-right:1.375rem}.article[data-v-87ffcada]{max-width:70rem;margin:0 auto}.article .article-unavailable[data-v-87ffcada]{color:#fa8919;font-size:15px;font-weight:600;line-height:24px;border-radius:5px;padding:12px;background-color:#f6f7fb;margin-top:20px}.article .article-unavailable .iconfont[data-v-87ffcada]{font-size:12px}.article .main[data-v-87ffcada]{padding:1.25rem 0;margin-bottom:52px}.article-title[data-v-87ffcada]{color:#353535;font-weight:400;line-height:1.65rem;font-size:1.34375rem}.article-info[data-v-87ffcada]{color:#888;font-size:.9375rem;margin-top:1.0625rem}.article-content[data-v-87ffcada]{margin-top:1.0625rem}.article-content.android video[data-v-87ffcada]::-webkit-media-controls-fullscreen-button{display:none}.copyright[data-v-87ffcada]{color:#b2b2b2;padding-bottom:20px;margin-top:20px;font-size:13px}.audio-player[data-v-87ffcada]{width:100%;margin:20px 0}.to-comment[data-v-87ffcada]{overflow:hidden;padding-top:10px;margin-bottom:-30px}.to-comment a.button-primary[data-v-87ffcada]{float:right;height:20px;font-size:12px;line-height:20px;padding:4px 8px;cursor:pointer}.article-comments[data-v-87ffcada]{margin-top:2rem}.article-comments h2[data-v-87ffcada]{text-align:center;color:#888;position:relative;z-index:1;margin-bottom:1rem}.article-comments h2[data-v-87ffcada]:before{border-top:1px dotted #888;content:"";position:absolute;top:56%;left:0;width:100%;z-index:-1}.article-comments h2 span[data-v-87ffcada]{font-size:15.25px;font-weight:400;padding:0 1rem;background:#fff;display:inline-block}.article-sub-bottom[data-v-87ffcada]{z-index:10;cursor:pointer}.switch-btns[data-v-87ffcada]{height:76px;cursor:pointer;padding-top:24px;padding-bottom:24px;border-bottom:10px solid #f6f7fb;position:relative}.switch-btns[data-v-87ffcada]:before{content:" ";height:1px;background:#e8e8e8;position:absolute;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;left:1.375rem;right:1.375rem}.switch-btns .btn[data-v-87ffcada]{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.switch-btns .btn .tag[data-v-87ffcada]{-webkit-box-flex:0;-ms-flex:0 0 62px;flex:0 0 62px;text-align:center;color:#888;font-size:14px;border-radius:10px;height:22px;line-height:22px;background:#f6f7fb;font-weight:400}.switch-btns .btn .txt[data-v-87ffcada]{margin-left:10px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#888;font-size:15px;height:22px;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}@media (max-width:769px){.article .breadcrumb[data-v-87ffcada]{padding-top:10px;padding-bottom:10px}}





    </style>
<style type="text/css">
        .comment-item{list-style-position:inside;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:1rem}.comment-item a{border-bottom:none}.comment-item .avatar{width:2.625rem;height:2.625rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%}.comment-item .info{margin-left:.5rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.comment-item .info .hd{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.comment-item .info .hd .username{color:#888;font-size:15.25px;font-weight:400;line-height:1.2}.comment-item .info .hd .control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.comment-item .info .hd .control .btn-share{color:#888;font-size:.75rem;margin-right:1rem}.comment-item .info .hd .control .btn-praise{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:15.25px;text-decoration:none}.comment-item .info .hd .control .btn-praise i{color:#888;display:inline-block;font-size:.75rem;margin-right:.3rem;margin-top:-.01rem}.comment-item .info .hd .control .btn-praise i.on,.comment-item .info .hd .control .btn-praise span{color:#ff5a05}.comment-item .info .bd{color:#353535;font-size:15.25px;font-weight:400;white-space:normal;word-break:break-all;line-height:1.6}.comment-item .info .time{color:#888;font-size:9px;line-height:1}.comment-item .info .reply .reply-hd{font-size:15.25px}.comment-item .info .reply .reply-hd span{margin-left:-12px;color:#888;font-weight:400}.comment-item .info .reply .reply-hd i{color:#ff5a05;font-size:15.25px}.comment-item .info .reply .reply-content{color:#353535;font-size:15.25px;font-weight:400;white-space:normal;word-break:break-all}.comment-item .info .reply .reply-time{color:#888;font-size:9px}




    </style>
</head>
<body>
<div id="app">
<div class="article" data-v-87ffcada="" id="watermark">

<div class="main main-app" data-v-87ffcada="">
<h1 class="article-title pd" data-v-87ffcada="">
                15讲了解文件管理，什么是multi-rootworkspace
            </h1>
<div class="article-content typo common-content pd" data-v-87ffcada=""><img data-v-87ffcada="" src="https://static001.geekbang.org/resource/image/7f/3b/7f80a48af0b1ceedaec783e475b5b73b.jpg"/>
<div class="" data-v-87ffcada="" id="article-content">
<div class="text">
<p>今天我们一起来了解一下在 VS Code 中我们是如何管理文件和文件夹，以及如何在工作台中管理我们打开的编辑器。</p>
<p>首先需要说明的是，VS Code 的各个功能，都是基于当前打开的文件或者文件夹的。</p>
<p>该怎么去理解这个概念呢？如果你使用过 IDE 的话， 你应该记得在第一次打开 IDE 的时候，它们往往需要你创建一个工程，这个工程会生成一个特殊的工程文件。这个工程文件记载了这个项目有哪些相关的文件、项目的配置、构建脚本等等。这个文件记录着 IDE 管理工程的元信息，开发团队也能够通过共享这个工程文件保证成员工作环境的一致性。但是工程文件对用户体验就不太友好了，比如说项目文件可能对 IDE 的版本有所要求，项目文件损坏了 IDE 读取不了但是我们也不知道如何修复，等等。</p>
<p>VS Code 则选择了一种相对轻量，而且大家都易于理解的方式，那就是<strong>所有的操作都基于文件和文件夹</strong>。当你打开一个文件夹，VS Code 的核心功能就会对这个文件夹进行分析，并提供对应的功能。比如，在打开的文件夹下检测到有 .git 文件，就加载 Git 插件来提供版本管理的功能；或者发现文件夹下有 tsconfig.json ，就会激活 TypeScript 插件提供语言服务。</p>
<p>当你第一次打开 VS Code 的时候，工作台中还没有打开任何文件夹。这时候在欢迎界面的左上方，你能够看到：“新建文件”和“打开文件夹”等这样的快捷键。</p><!-- [[[read_end]]] -->
<p><img alt="" src="https://static001.geekbang.org/resource/image/82/46/82ed3a74b0b3ae0de0a30cec96f0cb46.png"/></p>
<center><span class="reference">未打开文件夹，状态栏为紫色</span></center>
<p>这时候请注意工作台最下方的状态栏，当 VS Code 没有打开任何文件夹的时候，它的颜色是紫色的。而如果在工作台中打开了某个文件夹，状态栏的颜色就会变成蓝色。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/d3/f1/d38465da9979a869492b8abf1891d7f1.png"/></p>
<center><span class="reference">打开文件夹后，状态栏变成蓝色</span></center>
<h2>资源管理器</h2>
<p>当你打开一个文件夹之后，你就能在工作台的最左侧看到资源管理器。资源管理器将当前文件夹下的文件和子文件夹，以树形结构的形式呈现出来。每一个文件的前面还会有一个小图标，用于反映文件的类型。</p>
<p>在这个列表里，你既可以使用鼠标来打开文件，展开文件夹，也可以通过鼠标右键来唤出上下文菜单，对文件或者文件夹进行重命名、删除等操作。另外，资源管理器还支持鼠标进行多文件选择和拖转（drag &amp; drop）。相信这已经是大家都非常熟悉的一种设计语言，这里我就不多加赘述。</p>
<p>在资源管理器的最上方，你可以看到一个列表，叫做 “打开的编辑器”。这个很好理解，就是指这里面列出的都是当前已经被打开的文件。</p>
<p>文件列表的顶部，有一个标题栏，上面显示着当前打开的文件夹的名字，在我们文中的图片里，你可以看到这个文件夹的名字是 “VSCODE-SAMPLE”。如果你把鼠标移动到这个标题栏上时，就能够在文件夹名的右侧看到几个按钮。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/f6/81/f6eed35ea030bde6fcc396b010321881.png"/></p>
<center><span class="reference">资源管理器文件列表标题栏的按钮</span></center>
<p>然后，你只需把鼠标移动到这些按钮上，就能看到它们的名字，分别是新建文件、新建文件夹、刷新和全部折叠，具体功能想必你一看即可知之。同样的，这些操作也可以通过右键上下文菜单来唤出。</p>
<h3>设置</h3>
<p>资源管理器你应该比较容易熟悉，也许不用介绍你也可以很快就能琢磨出来，不过这里还有几个设置需要我分享给你，以后在使用编辑器的过程中可能会用得着。</p>
<p>第一个是 “explorer.autoReveal”，默认是打开的。当你在编辑器里打开一个文件时，资源管理器里的列表会自动将选中这个文件，并且滚动列表，将这个文件项滚动到屏幕的中间，保证你能够看到。如果你不喜欢这个功能，可以将其关闭。</p>
<p>第二个是 “explorer.confirmDelete”，默认也是打开的。当你在一个文件项上右键选择删除时，VS Code 会跳出一个确认窗口，询问你是否确实要删除此文件。这个询问的目的是防止你误操作，想必这个功能你已经很熟悉了，当然，如果你觉得它多此一举的话，也可以将其关闭。</p>
<h3>.vscode</h3>
<p>看到这里你可能会问，VS Code 是基于文件夹来进行管理的，各个插件也会分析当前打开的文件夹，但这是不是也意味着 VS Code 其实对项目没有任何管理和配置的能力呢？</p>
<p>其实不然，VS Code 是允许你创建几个跟当前文件夹或者跟项目有关的配置保存在这个文件夹中。这跟 IDE 的工程文件的思路是一致的，把设置放在这个文件夹中，便于团队内部进行共享。但二者区别在于，VS Code 的绝大部分功能，不需要这些配置文件也能工作，同时，这些文件都尽可能保证易于阅读和修改。</p>
<p>为了和其他工具添加的配置文件区分开，VS Code 的配置文件都会放在一个子文件夹 .vscode 中，下面我们一起来看这个特殊的文件夹。</p>
<p>这个文件夹中可以包含以下几种文件。</p>
<p>第一个是配置文件（settings.json）。这个文件的作用和格式，跟我们之前修改的用户设置几乎是完全一样的。唯一的区别就在于这个文件的设置，只有当前这个文件夹在VS Code 中被打开时才会生效。</p>
<p>这个文件的存在，很好地解决了个人喜好和项目规范之间的冲突。比如说我写代码的时候喜欢用空格，而不是制表符，这样的话，在我的个人设置里面就可以设置为永远使用空格。但是在VS Code的这个项目中，团队要求一定要都使用制表符，那我们就可以在 settings.json 中将这个配置写进去，而不是粗暴地要求每一位成员都去修改他们各自的配置文件。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/82/94/82d68fa350739255a69cdd595d4cb594.png"/></p>
<p>另外常用的两个文件：一个是调试设置（launch.json），它是用于说明如何调试当前文件夹下的代码；一个则是任务设置（tasks.json），它是关于 VS Code 任务系统的配置文件。把它们放在文件夹中甚至一并放入到代码仓库中，这样任何使用这个项目的工程师，都不用学习如何配置调试和配置任务系统就能运行代码了。</p>
<p>当然肯定也会有人不喜欢在代码仓库中出现编辑器相关的各种配置文件，不过也不用担心，你可以使用版本管理的忽略配置，将 .vscode 这个文件夹剔除在版本管理之外。那么，你就可以自己去控制跟这个项目相关的配置文件了。</p>
<h2>多文件夹工作区（multi-root workspace）</h2>
<p>今天我要介绍的第二个主要知识点叫做多文件夹工作区（multi-root workspace）。老实说呢，这个概念是有一定的理解难度的。</p>
<p>上面我们提到的基于文件夹的这种项目管理方式，从 VS Code 第一天开始就存在了。也几乎从第一天开始，我们就收到了用户对于这一个设计不满的反馈。对于这些不满的用户而言，他们的痛点在于他们经常需要同时对多个文件夹下的代码进行操作。但是 VS Code 关于单个文件夹的这种操作模式，要求了他们必须同时打开多个窗口，并不停地在它们之间切换。</p>
<p>多文件夹工作区就是为了针对这个问题而实现的解决方案。那下面我们就一起来看一看怎样去创建一个多文件夹工作区。</p>
<p>首先，在 VS Code 中打开一个文件夹，此时 VS Code 处于一个单文件夹的状态。然后你可以调出命令面板，搜索 “将文件夹添加到工作区” （add folder to workspace）并执行，或者使用菜单，“文件 —&gt; 将文件夹添加到工作区”，这之后，选择你想要在当前窗口打开的文件夹。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/7d/c5/7d785818716da4371ac4dd0d7d44edc5.gif"/></p>
<center><span class="reference">添加新的文件夹到工作区内</span></center>
<p>此时在资源管理器里的标题栏里，你能看到“无标题 （工作区）”这样的文字，这说明当前的工作区已经有多个文件夹了，只是现在你还没有保存这个多文件工作区，也没有给它指定一个名字。</p>
<p>要保存这个工作区，接下来你可以调出命令面板，搜索“将工作区另存为” （save workspace as），VS Code 就会为这个工作区创建一个文件，这个文件的后缀名是 “code-workspace”。比如，在下面的动图中，我给这个工作区取名为 sample，然后指定在 Code中这个文件夹下保存。这样操作后，VS Code 就会在 Code 文件夹下创建一个 sample.code-workspace 文件。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/30/d6/3083ad068f2fc8b9762ae71d6ff2e5d6.gif"/></p>
<center><span class="reference">保存多文件夹工作区</span></center>
<p>你可以看到，操作完之后资源管理器的标题栏已经相应地改变了。另外，sample.code-workspace 虽然有个特殊的后缀，但这个文件的格式其实也是 JSON，你可以自行打开这个文件查看一下。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/4a/ae/4a766f93861efe49cdc27d6cfcbdf0ae.png"/></p>
<center><span class="reference">打开sample.code-workspace这个文件 </span></center>
<pre><code>{
 "folders": [
  {
            "path": "vscode-sample",
  },
  {
   "path": "vscode"
  }
 ],
    "settings": {}
}
</code></pre>
<p>这个 JSON 文件，默认有两个键（key）。第一个是 folders 文件夹，它里面罗列的是这个多文件工作区里有哪些文件夹。可以看出，这些文件夹的地址，都是这个 sample.code-workspace 文件的相对路径。第二个则是 settings 设置，你可以在这个值里面添加专属于这个多文件夹工作区的设置。它的作用，跟上面我们介绍的 .vscode 文件夹下的 settings.json 文件是类似的。</p>
<p>此外，这个文件还有两个可选的键，它们分别是 extensions 和 launch，相信看到名字，你已经猜出来它们大概是跟什么相关的了。这部分我会在后面的章节中详细介绍的。</p>
<h2>工作区切换</h2>
<p>上面就是 VS Code 关于文件夹管理的主要知识了。刚开始我说多文件夹工作区有点复杂，你可能并不这么觉得。我有这种感受主要还是跟我的个人使用习惯有关，我喜欢为每个文件夹创建一个新的窗口，在这些窗口快速切换本身就已经很方便了。</p>
<p>如果你同时打开了多个窗口，可以按下 Ctrl + W，或者调出命令面板，搜索 “切换窗口（Switch Window）”，然后选择你要跳转的那个文件夹中去。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/3d/5f/3da2fea6abf9bf05e12eaad502b0ca5f.gif"/></p>
<center><span class="reference">切换窗口</span></center>
<p>如果你只是要跳转到上一个打开的窗口，那就更方便了。打开命令面板，搜索“快速切换窗口（Quick Switch Window）”并执行，就能够直接跳转到之前的窗口了，而无需再做选择。这里我倒是非常建议你给这个命令指定一个快捷键，这样你就能在窗口之间一键切换了。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/4f/05/4fea6f81f72a412a3fcd03092e7cfa05.gif"/></p>
<center><span class="reference">快速切换窗口</span></center>
<p>如果你同一时间只会关注一个项目，那你也大可不必使用多个窗口。我就经常只用一个显示器和一个窗口，然后当我想在另外一个项目上工作时，我就会按下 Ctrl + R（或者使用命令面板，搜索 “打开最近的文件”），此时我就能够看到最近操作过的文件夹并按下回车键进行切换了。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/40/08/40336b9fbb88c649968193e1e7ce6008.gif"/></p>
<center><span class="reference">切换文件夹</span></center>
<p>当你按下 Ctrl + R 调出最近打开的文件夹的列表后，也能够按下 Cmd + 回车键，将它在一个新的窗口中打开。</p>
<p><img alt="" src="https://static001.geekbang.org/resource/image/a2/5d/a2f18336e7ef717497a00018bbb9995d.gif"/></p>
<center><span class="reference">将文件夹打开在新的窗口中</span></center>
<p>正是因为有上面这几个命令的存在，让我觉得没有多文件夹工作区也是可以的。当然，多文件夹工作区在某些方面的优势是不可比拟的，比如说跨文件夹的代码调试，这个我们后面也会介绍。</p>
<h2>小结</h2>
<p>这就是我们今天的全部内容了。你可以试着重新审视一下，你是如何管理你的项目、文件夹的？能不能通过 VS Code 的多文件夹系统和快捷命令们对它们进一步优化呢？或者你有什么好的经验或技巧，也欢迎你留言和分享。</p>
<hr/>
<p><img alt="" src="https://static001.geekbang.org/resource/image/92/06/92862660523add24b3168f22954fa506.jpg"/></p>
</div>
</div>
</div>
<div class="article-comments pd" data-v-87ffcada=""><h2 data-v-87ffcada=""><span data-v-87ffcada="">精选留言</span></h2>
<ul data-v-87ffcada="">
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/10/fb/51/870a6fcb.jpg"/>
<div class="info">
<div class="hd"><span class="username">Trust me ҉҉҉҉҉҉҉❀</span>
</div>
<div class="bd">mac cmd+`可以切换窗口 <br/></div>
<span class="time">2018-10-17 00:37</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/12/d0/8f/eda69272.jpg"/>
<div class="info">
<div class="hd"><span class="username">嘚啵嘚朱</span>
</div>
<div class="bd">大神，关于个人setting.json的设置能不能详细的讲下呢？没看明白 <br/></div>
<span class="time">2018-11-13 10:14</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/12/c5/37/bb5465cf.jpg"/>
<div class="info">
<div class="hd"><span class="username">冰山北极熊</span>
</div>
<div class="bd">老师，个人设置是在哪里配置？不打开文件夹进行配置就是个人配置吗？ <br/></div>
<span class="time">2018-10-17 12:02</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/12/c5/37/bb5465cf.jpg"/>
<div class="info">
<div class="hd"><span class="username">冰山北极熊</span>
</div>
<div class="bd">老师，配置文件怎么区分是个人配置和项目配置呢？是需要每个项目都要进行配置吗？ <br/></div>
<span class="time">2018-10-17 11:47</span>
<div class="reply">
<div class="reply-hd"><span>作者回复</span></div>
<p class="reply-content">在文件夹下的是属于项目的配置，如果你希望每个项目都总一样的配置，那么放到个人设置里即可</p>
<p class="reply-time">2018-10-17 12:00</p>
</div>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/0f/57/4f/6fb51ff1.jpg"/>
<div class="info">
<div class="hd"><span class="username">一步</span>
</div>
<div class="bd">将多个项目 添加到同一个工作区，保存为 code-workspace 文件后，怎么把这个code-workspace文件也添加到工作区呢?，这样可以可以方便查看设置,麻烦老师解答一下呢 <br/></div>
<span class="time">2018-10-16 10:27</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/12/c5/85/2651f4dd.jpg"/>
<div class="info">
<div class="hd"><span class="username">谢mingmin</span>
</div>
<div class="bd">问题是,搜索的时候，也是搜索整个工作区。如果可以设置只搜索某个项目文件夹里面的东西会比较好一点。至少速度快些 <br/></div>
<span class="time">2018-10-16 10:08</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>